<script setup>
import { onMounted, nextTick, ref } from 'vue';
import Menu from '@/utils/aside';
import subMenu from '@/components/SubMenu.vue';
import { useTabStore } from '@/store/tag';

const useTab = useTabStore();

let menu = ref(Menu);

function handleOpen(key, keyPath) {
   console.log(key, keyPath);
}

function handleClose(key, keyPath) {
   console.log('close', key, keyPath);
}
onMounted(() => {
   nextTick(() => {});
});
</script>

<template>
   <div class="aside_logo">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
   </div>
   <el-menu
      class="el-menu-vertical-demo"
      text-color="#333"
      active-text-color="#409eff"
      :collapse="useTab.isCollapse"
      :unique-opened="true"
      :default-active="useTab.isActive.path"
      @open="handleOpen"
      @close="handleClose"
   >
      <subMenu :menuList="menu"></subMenu>
   </el-menu>
</template>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
   width: 200px;
   // height: 100vh;
}
.aside_logo {
   height: 60px;
   display: flex;
   .logo {
      margin: auto;
   }
}
.el-sub-menu__title {
   line-height: $global-line-height40;
}
</style>
